<template>
	<view class="content" style="height: 100%;">
		<view class="box_bg" :style="'background: url('+ c_imgPath + 'shiwan_bg.png'+ ') repeat-y 0 0 / 100% auto;'">

		</view>
		<view class="box_bg1">
			<view class="head">
				<view class="status_bar" :style="'height:'+ statusBarHeight +'px;'"></view>
				<view class="header_title">
					<view @click="back()">
						<image :src="i_imgPath+'back.png'"></image>返回
					</view>
					<view class="hang1">试试手气</view>
				</view>
			</view>
		</view>
		<view class="title">
			<image :src="c_imgPath + 'shiwan_title.png'"></image>
		</view>
		<view class="title_f">
			<image :src="c_imgPath + 'shiwan_h1.png'"></image>
		</view>
		<view class="title_count">剩余次数:{{count}}次</view>
		<view class="banner">
			<swiper class="swiper" next-margin="150rpx" previous-margin="150rpx" :current="swiperIndex"
				@change="selectIndex">
				<swiper-item v-for="(item,index) in list" :key="index" class="swiper-item">
					<view class="item">
						<image :src="item.imgurl_detail"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="btn" @click="selecBox">就选这个</view>
		<view class="right">
			<view class="right_item" @click="toJilu">试玩记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				c_imgPath: 'https://qt.yhemall.com/chouka/',
				i_imgPath: this.$z_img + 'shouye/',
				list: [],
				swiperIndex: 0,
				count: 0
			}
		},
		onLoad() {
			this.getList();
		},
		onShow() {
			this.getNum();
		},
		methods: {
			toJilu() {
				uni.navigateTo({
					url: '/pages/chouka/shiwan_jilu'
				})
			},
			back() {
				var pages = getCurrentPages();
				// console.log(pages)

				if (pages.length == 1 && pages[0].route == "pages/shouye/detail_wuxian") {
					uni.switchTab({
						url: '/pages/shouye/index'
					})
				} else {
					uni.navigateBack()
				}

			},
			selecBox() {
				uni.navigateTo({
					url: '/pages/chouka/ka?goods_id=' + this.list[this.swiperIndex].id + '&shiwan=1'
				})
			},
			selectIndex(e) {
				this.swiperIndex = e.detail.current;
			},
			getList() {
				let that = this;
				that.req({
					url: 'card_goods_list',
					data: {
						page: 1,
						category_id: 0,
						user_id: uni.getStorageSync('userinfo').ID ? uni.getStorageSync('userinfo').ID : ''
					},
					success(res) {
						that.list = res.data.data;
					}
				})
			},
			getNum() {
				let that = this;
				that.req({
					url: 'sw_num',
					success(res) {
						that.count = res.data;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.right {
		position: fixed;
		top: 340rpx;
		right: 0;

		.right_item {
			width: 138rpx;
			height: 43rpx;
			background: rgba(255, 255, 255, 0.23);
			color: #FFFFFF;
			text-align: center;
			line-height: 43rpx;
			border-radius: 30rpx 0 0 30rpx;
			font-size: 22rpx;
		}
	}

	.head {
		position: fixed;
		top: 0;
		z-index: 20;
		color: #FFFFFF;
		font-size: 32rpx;

		.header_title>view:nth-of-type(2) {
			width: 520rpx;
			text-align: center;
			/* margin: auto; */
		}

		.header_title>view:nth-of-type(1) {
			display: flex;
			align-items: center;
		}

		.header_title image {
			width: 48rpx;
			height: 48rpx;
		}

		.header_title {
			height: 70rpx;
			line-height: 70rpx;
			width: 100%;
			margin-top: 60rpx;
			box-sizing: border-box;
			font-weight: bold;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;
		}

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
	}

	.banner {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin-top: 30rpx;

		.swiper {
			height: 550rpx;

			.swiper-item {

				.item {
					width: 350rpx;
					height: 550rpx;
					margin: auto;
					text-align: center;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.title {
		text-align: center;
		margin-top: 320rpx;

		image {
			width: 400rpx;
			height: 106rpx;
		}
	}

	.title_f {
		text-align: center;
		margin-top: 150rpx;

		image {
			width: 677rpx;
			height: 56rpx;
		}
	}

	.title_count {
		color: #FFFFFF;
		text-align: center;
	}

	.btn {
		width: 380rpx;
		height: 79rpx;
		margin: auto;
		background: rgba(255, 255, 255, 0.35);
		border-radius: 260rpx 260rpx 260rpx 260rpx;
		text-align: center;
		line-height: 79rpx;
		margin-top: 100rpx;
		color: #ffffff;
	}
</style>